<template>
  <div class="iphone_content">
    <div class="nav_iphone">
      <!--      <div class="size_info">iphone6s(375*600)</div>-->
      <draggable
        class="iphone iphone6"
        :list="viewData"
        v-bind="viewGroups"
        @change="log"
        @add="add"
        @start="start"
        @end="end"
      >
        <!--        <null-group v-if=" viewData.length === 0 " />-->
        <!--        class判断类型名字中是否包含top bottom 来判断是否悬浮组件-->
        <div
          v-for="(item, index) in viewData"
          :key="item.id"
          :class="['iphone_library', item.checked ? (item.hasOwnProperty('seat') ? 'not_cover' : 'cover'):'',item.seat ==='right' ? 'right':'', item.seat ==='top' ? 'top':'',item.seat ==='bottom' ? 'bottom':'']"
          :style="item.seat + ':'+ item.attr.position+ 'px'"
          @click="viewActive(index)"
        >
          <!-- 工具栏-->
          <div v-if="item.checked" class="editTools">
            <el-tooltip v-if="!item.hasOwnProperty('seat')" class="item" effect="dark" content="前移" placement="right">
              <div
                :class="{
                  icon_no_edit: index === 0,
                  'iconfont icon-een': true
                }"
                @click="editTop(index)"
              />
            </el-tooltip>
            <el-tooltip v-if="!item.hasOwnProperty('seat')" class="item" effect="dark" content="后移" placement="right">
              <div
                :class="{
                  icon_no_edit: index === viewData.length - 1,
                  'iconfont icon-down': true
                }"
                @click="editNext(index)"
              />
            </el-tooltip>
            <el-tooltip v-if="!item.hasOwnProperty('seat')" class="item" effect="dark" content="复制" placement="right">
              <div
                class="iconfont icon-fuzhi"
                @click="editCopy(item.type, index)"
              />
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="right">
              <div
                class="iconfont icon-shanchucopy"
                @click="editDelete(index)"
              />
            </el-tooltip>
          </div>
          <!-- 组件 topType上一级分组类型 type本次组件类型-->
          <img-carousel v-if="item.topType === 'image'" :type-style="item.type" :attr="item.attr" />
          <!-- 表单 -->
          <form-group v-if="item.topType === 'form'" :type-style="item.type" :attr="item.attr" />
          <!-- 按钮 -->
          <button-group v-if="item.topType === 'button'" :type-style="item.type" :type-seat="item.seat" :attr="item.attr" />
          <!-- 在线咨询-->
          <kf-group v-if="item.topType === 'kf'" :type-style="item.type" :type-seat="item.seat" :attr="item.attr" />
        </div>
      </draggable>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import { mapGetters } from 'vuex'
import '@/library/index'
import { deepCopy, uuid } from '@/js/common'

export default {
  name: 'NavIphone',
  components: {
    draggable
  },
  computed: {
    ...mapGetters([
      'viewGroups',
      'iphoneIndex',
      'viewData'
    ])
  },
  data() {
    return {
      current: ''
    }
  },
  mounted() {
    /** 为了防止火狐浏览器拖拽的时候以新标签打开 **/
    document.body.ondrop = function(event) {
      event.preventDefault()
      event.stopPropagation()
    }
  },
  methods: {
    log(evt) {},
    /** 当iPhone中有新增 **/
    add(e) {},
    start(evt) {},
    end(evt) {
      const _that = this
      _that.viewActive(evt.newIndex)
    },
    viewActive(index) {
      const _that = this
      // const classNameFlag = $event.target.parentNode.className
      // if (classNameFlag === 'editTools') {
      //   return
      // }
      _that.viewData.find((value, key) => {
        index === key ? (value.checked = true) : (value.checked = false)
      })
      // 更新属性库
      _that.$store.dispatch('uploadIndex', index)
    },
    editTop(index) {
      const _that = this
      if (index !== 0) {
        _that.viewData[index] = _that.viewData.splice(
          index - 1,
          1,
          _that.viewData[index]
        )[0]
      } else {
        // _that.viewsMedia.push(_that.viewsMedia.shift());
      }
      _that.viewActive(index - 1)
    },
    editNext(index) {
      const _that = this
      if (index !== _that.viewData.length - 1) {
        _that.viewData[index] = _that.viewData.splice(
          index + 1,
          1,
          _that.viewData[index]
        )[0]
      } else {
        _that.viewData.unshift(_that.viewData.splice(index, 1)[0])
      }
      _that.viewActive(index + 1)
    },
    editDelete(index) {
      const _that = this
      _that.viewData.splice(index, 1)
    },
    editCopy(name, current) {
      const _that = this
      let viewCopy = _that.viewData.find((item, index) => {
        return current === index
      })
      viewCopy = deepCopy(viewCopy)
      viewCopy.id = uuid()
      viewCopy['checked'] = false
      _that.viewData.splice(current + 1, 0, viewCopy)
    }
  }
}
</script>

<style scoped lang="scss">
  @import "~@/iconfont/iconfont.css";
  .iphone_content {
    width: 100%;
    height: 90%;
    display: flex;
    box-sizing:border-box;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    overflow-y: auto;
    .nav_iphone {
      width: 375px;
      min-height: 85vh;
      .size_info {
        text-align: center;
        height: 60px;
        line-height: 60px;
        font-weight: 600;
      }
      .iphone {
        background: white;
        /*box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.08);*/
        .iphone_library {
          position: relative;
        }
        .top {
          position: absolute !important;
          top: 0;
          z-index: 99;
          width: 100%;
        }
        .bottom {
          position: absolute !important;
          bottom: 0;
          z-index: 99;
          width: 100%;
        }
        .right {
          position: absolute !important;
          right: 0;
          top: 35%;
          z-index: 99;
          /*width: 100%;*/
        }
        .editTools {
          cursor: default;
          width: 40px;
          min-height: 40px;
          position: absolute;
          right: -60px;
          background: white;
          border-radius: 30px;
          -webkit-transition: .2s;
          transition: .2s;
          -webkit-box-shadow: 0 3px 16px 0 rgba(0,0,0,.04);
          box-shadow: 0 3px 16px 0 rgba(0,0,0,.04);

          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-evenly;
          .iconfont {
            font-size: 17px;
            cursor: pointer;
            margin: 10px 0px;
          }
          .icon-fuzhi {
            color: #faad14;
          }
          .icon-shanchucopy {
            color: #f5222d;
          }
          .icon_no_edit {
            color: #dddada;
            pointer-events: none;
          }
        }
      }
      .iphone6 {
        width: 375px;
        min-height: 85vh;
        position: relative;
        background: white;
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.08);
      }
    }
  }
</style>
